<template>
	<div>
		<div id="ichart" class="ichart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	name: 'GovSuperviseAdminTabularData',
	props: {
		ichartName: {
			type: String,
			required: false,
		}
	},
	data() {
		return {
			myChart: '',
			dataList: [], //数据列表
			xData: [],
			yData: [],
			name:''
		};
	},
	created() {

	},
	mounted() { },
	methods: {
		getDataList(data,name) { //获取areaId
			this.dataList = data
			this.name = name
			//x轴数据
			this.xData = []
			this.yData = []
			this.dataList.forEach(res => {
				this.xData.push(res.xstr)
				this.yData.push(res.value)
			})
			//y轴数据
			this.initChart()
		},
		domIsExistence(name) {
			if (name != null && name != "" && name != undefined) {
				name.dispose(); //解决echarts dom已经加载的报错
			}
		},
		// 交易数据汇总订单金额明细
		initChart() {
			this.domIsExistence(this.myChart)
			this.myChart = echarts.init(document.getElementById('ichart'));
			let that = this
			let legendData = []
			legendData.push(this.name)
			let option = {
				xAxis: {
					type: 'category',
					// x轴数据文字颜色
					axisLabel: {
						// color: '#B3B8BE',
						// interval:5, //刻度线
					},
					nameGap: 7,//坐标轴名称与轴线之间的距离。
					// x轴那天坐标轴线的颜色
					// axisLine: {
					// 	show: true, //隐藏轴线
					// 	lineStyle: {
					// 		color: '#B3B8BE',
					// 	}
					// },
					//x轴上面刻度线隐藏
					axisTick: {
						show: false,
					},
					// x轴上面指示线
					// axisPointer: {
					// 	show: true,
					// 	type: "line",
					// 	z: 0,
					// 	lineStyle: {
					// 		color: '#FFB6A5',
					// 		type: "dashed",
					// 		dashOffset: 0.5,
					// 		join: "round"
					// 	}
					// },
					triggerEvent: true,
					//这里是x轴数据
					data: this.xData
				},
				legend: {
					bottom: 'bottom',
					orient: 'vertical',
					// itemGap: 15,
					itemWidth: 9,
					lineHeight: 9,
			    	icon: 'circle',
					data: legendData
				},
				//设置网格
				grid: {
					top: 20,
					bottom: 60,
					right: 20,
					left: 50,
				},
				//y轴设置
				yAxis: {
					type: 'value',
					//y轴标签文字颜色
					axisLabel: {
						color: '#a7a7a7',
						formatter: '{value}'
					},
					// y轴分割线设置为虚线
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed',
						}
					}
				},
				//设置提示为点击时
				tooltip: {
					// showContent: true,
					trigger: 'axis',
					show: true,
					// triggerOn: 'click',
					formatter: function (params) {
						// console.log(params[0])
						let str = params[0].value;
						return params[0].axisValue + '</br>'+params[0].seriesName +'：' + params[0].value
					},
					// backgroundColor:'#t',
					// textStyle : {
					// 	color: '#ffffff',
					// },
				},
				//设置曲线的颜色
				// color: ['#5874c7'],
				series: [{
					//这里是数据
					data: this.yData,
					type: 'line',
					name:this.name,
					//设置为平滑，默认为折线
					smooth: true,
					labelLine: {
						normal: {
							// 统一设置指示线长度
							length: 45,
						}
					},
					// 高亮
					// emphasis: {
					// 	disabled: true,
					// 	scale: 3,
					// 	itemStyle: {
					// 		color: "#5874c7",
					// 		borderColor: "#ffffff",
					// 		borderWidth: 2.5,
					// 		shadowColor: '#E0C4C4',
					// 		shadowBlur: 4,
					// 		shadowOffsetX: 0,
					// 		shadowOffsetY: 2
					// 	}
					// }
				}]
			}
			option.series[0].name = this.name
			this.myChart.setOption(option)
		},
	},
};

</script>

<style lang="scss" scoped>
.ichart {
	width: 100%;
	height: 100%;
}
</style>
